<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM的练习</title>
  <script>
    let flag = false;
    function confirm_value(obj) {
      // alert(obj.parentNode.firstChild.value);
      let p = obj.parentNode;
      let child = p.firstChild;
      p.innerHTML = child.value;
      flag = false
    }
    window.onload = function() {
      let ls = document.querySelectorAll('#u1 li');
      ls.forEach(ele=>{
        ele.onmouseover = function() {
          this.style.backgroundColor = '#aaa';
        }
        ele.onmouseleave = function() {
          this.style.backgroundColor = '#fff';
        }
        ele.ondblclick = function() {
          if(!flag) {
            this.innerHTML = '<input type="text" value="'+this.innerHTML+'" /><input type="button" value="确定" onclick="confirm_value(this)" />';
            flag = true;
          }
        }
      });
      
    }
  </script>
</head>
<body>
  <ul id="u1">
    <li>测试列表</li>
    <li>测试列表</li>
    <li>测试列表</li>
    <li>测试列表</li>
    <li>测试列表</li>
    <li>测试列表</li>
    <li>测试列表</li>
  </ul>
</body>
</html>